<!--
 * @Author: Wangtao
 * @Date: 2020-09-21 09:55:09
 * @LastEditors: Wangtao
 * @LastEditTime: 2021-03-25 14:43:41
-->
<template>
  <pageSolt @goBack="goBack">
    <template slot="title">外呼弹屏</template>
    <template slot="content">
      <div class="exit-content">
        <div class="edit-form">
          <CallSummaryByCallTask></CallSummaryByCallTask>
        </div>
        <div class="edit-oprate">
          <outboundOprate :data="data" :isShowFold='false'></outboundOprate>
        </div>
      </div>
    </template>
  </pageSolt>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import pageSolt from '../common/page-solt.vue'
import { CommonModule } from '@/store/modules/common/index'
import { commonAction } from '@/utils/common'
import CallSummaryByCallTask from './CallSummaryByCallTask.vue'
import outboundOprate from '../common/outbound-oprate.vue'
@Component({
  name: 'PriviewEditOrAdd',
  components: { pageSolt, CallSummaryByCallTask, outboundOprate },
  filters: {
    getOprateTit (data) {
      if (Object.keys(data).length <= 0) {
        return '创建'
      } else {
        return '更新'
      }
    }
  }
})
export default class PriviewEditOrAdd extends Vue {
  private $store: any
  private $message: any
  get account () {
    return this.$store.state.common.session.account._id
  }

  get isExit () {
    return Object.keys(this.data).length > 0
  }

  @Prop({ default: {} }) private data: any
  private beforeMount () {
    if (Object.keys(this.data).length > 0) {
      Object.keys(this.ruleForm).forEach((key) => {
        this.ruleForm[key] = this.data[key]
      })
    }
  }

  private ruleForm = {
    name: '',
    remark: '',
    skillgroup: [],
    agent: []
  }

  private rules = {
    name: [
      { required: true, message: '请输入活动名称', trigger: 'blur' },
      { min: 2, max: 40, message: '长度在 2 到 40 个字符', trigger: 'blur' }
    ]
  }

  private goBack () {
    this.$emit('back')
  }

  private submitForm (formName) {
    (this.$refs as any)[formName].validate((valid) => {
      if (valid) {
        let tip = '创建成功！'
        let queryUrl = '/call/action/task/create'
        let queryData: any = this.ruleForm
        if (this.isExit) {
          tip = '更新成功'
          queryUrl = '/call/action/task/update'
          queryData = {
            _id: this.data.taskId,
            remark: this.ruleForm.remark,
            name: this.ruleForm.name
          }
        } else {
          queryData.account = this.account
        }
        const actionData = {
          url: queryUrl,
          method: 'POST',
          data: queryData
        }
        commonAction(actionData).then(resp => {
          if (resp && resp.success) {
            this.$emit('handleSuccess')
            this.$emit('back');
            (this.$message as any)({ message: tip, type: 'success' })
          }
        }).catch(err => { console.log(err) })
      } else {
        return false
      }
    })
  }

  private resetForm (formName) {
    (this.$refs as any)[formName].resetFields()
  }

  public get userList () {
    return CommonModule.publicCache.userList
  }

  public get queueList () {
    return CommonModule.publicCache.queueList
  }
}
</script>

<style lang="stylus" scoped>
.page-header
  padding 21px 24px 21px
  box-shadow 0px 0px 4px 0px #E0E6F0
  width 100%
  display flex
  align-items center
  font-weight 600
  font-size 14px
  i
    color #C4CDD4
    margin-right 8px
    cursor pointer
.exit-content
  height 100%
  display flex
  flex-direction column
  justify-content space-between
.edit-form
  height calc(100% - 60px)
  overflow scroll
  padding 16px
  box-sizing border-box
.edit-oprate
  height 50px
  display flex
  align-items center
  box-sizing border-box
  margin-bottom 15px
  padding 0 24px 0
</style>
